<!-- pages/login/login.vue -->
<template>
  <view class="login-container">
    <view class="login-header">
      <text class="title">用户登录</text>
      <text class="subtitle">请输入手机号和验证码完成登录</text>
    </view>
    
    <view class="login-form">
      <view class="input-group">
        <input 
          class="input" 
          type="number" 
          v-model="phone" 
          placeholder="请输入手机号"
          maxlength="11"
        />
      </view>
      
      <view class="input-group verification-group">
        <input 
          class="input" 
          type="number" 
          v-model="verificationCode" 
          placeholder="请输入验证码"
          maxlength="6"
        />
        <button 
          class="send-code-btn" 
          :disabled="isCountingDown || !isPhoneValid"
          @click="sendVerificationCode"
        >
          {{ countDownText }}
        </button>
      </view>
      
      <button 
        class="login-btn" 
        :disabled="!canLogin"
        @click="handleLogin"
      >
        登录
      </button>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      phone: '',
      verificationCode: '',
      countDown: 60,
      isCountingDown: false,
      timer: null
    }
  },
  computed: {
    isPhoneValid() {
      return /^1[3-9]\d{9}$/.test(this.phone);
    },
    countDownText() {
      if (this.isCountingDown) {
        return `${this.countDown}秒后重发`;
      }
      return '发送验证码';
    },
    canLogin() {
      return this.isPhoneValid && this.verificationCode.length === 6;
    }
  },
  methods: {
    sendVerificationCode() {
      if (!this.isPhoneValid) {
        uni.showToast({
          title: '请输入正确的手机号',
          icon: 'none'
        });
        return;
      }
      
      // 模拟发送验证码请求
      // 实际开发中应替换为真实的API调用
	
      console.log(`向手机号 ${this.phone} 发送验证码`);
      
      // 开始倒计时
      this.startCountDown();
      
      uni.showToast({
        title: '验证码已发送',
        icon: 'success'
      });
    },
    
    startCountDown() {
      this.isCountingDown = true;
      this.countDown = 60;
      
      this.timer = setInterval(() => {
        this.countDown--;
        if (this.countDown <= 0) {
          this.stopCountDown();
        }
      }, 1000);
    },
    
    stopCountDown() {
      this.isCountingDown = false;
      if (this.timer) {
        clearInterval(this.timer);
        this.timer = null;
      }
    },
    
    handleLogin() {
      if (!this.canLogin) {
        uni.showToast({
          title: '请填写完整信息',
          icon: 'none'
        });
        return;
      }
      
      // 模拟登录请求
      // 实际开发中应替换为真实的API调用
      console.log(`尝试登录: 手机号=${this.phone}, 验证码=${this.verificationCode}`);
      
      // 这里应该调用实际的登录接口验证验证码
      // 登录成功后的逻辑示例:
      uni.showToast({
        title: '登录成功',
        icon: 'success'
      });
      
      // 模拟登录成功跳转
      setTimeout(() => {
        // 登录成功后跳转到首页或其他页面
        uni.switchTab({
          url: '/pages/index/index'
        });
      }, 1000);
    }
  },
  
  beforeDestroy() {
    // 清理定时器
    if (this.timer) {
      clearInterval(this.timer);
    }
  }
}
</script>

<style scoped>
.login-container {
  padding: 40rpx;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.login-header {
  text-align: center;
  margin-bottom: 80rpx;
  padding-top: 100rpx;
}

.title {
  font-size: 48rpx;
  font-weight: bold;
  color: #333;
  display: block;
  margin-bottom: 20rpx;
}

.subtitle {
  font-size: 28rpx;
  color: #999;
}

.login-form {
  background-color: #fff;
  border-radius: 20rpx;
  padding: 40rpx;
  box-shadow: 0 10rpx 30rpx rgba(0, 0, 0, 0.05);
}

.input-group {
  position: relative;
  margin-bottom: 40rpx;
  border-bottom: 1rpx solid #eee;
  padding-bottom: 20rpx;
}

.input {
  width: 100%;
  height: 80rpx;
  font-size: 32rpx;
  color: #333;
}

.verification-group {
  display: flex;
  align-items: center;
  border-bottom: none;
  padding-bottom: 0;
}

.send-code-btn {
  width: 200rpx;
  height: 70rpx;
  line-height: 70rpx;
  font-size: 28rpx;
  background-color: #007AFF;
  color: white;
  border-radius: 10rpx;
  margin-left: 20rpx;
}

.send-code-btn[disabled] {
  background-color: #ccc;
}

.login-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background-color: #007AFF;
  color: white;
  border-radius: 10rpx;
  font-size: 32rpx;
  margin-top: 60rpx;
}

.login-btn[disabled] {
  background-color: #ccc;
}
</style>
